<template>
     <el-dialog title="权限目录编辑" :data="visible" :visible.sync="visible" :show-close="false" width="600px" :modal="true" :close-on-click-modal="false" :close-on-press-escape="false">
       <!-- 这里的:show-close="false"是设置不显示关闭按钮，因为弹窗显示状态值（:visible.sync）是从父组件传递的参数，如果使用自带的关闭按钮，会报出一个错误 -->
      
       <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click.stop="cancelModal"><i class="el-dialog__close el-icon el-icon-close"></i></button>
        
        <el-form :model="propsData"  :rules="rules" ref="propsData" label-width="140px">
         
          <el-form-item label="权限归属" prop="pid">
            <el-select v-model="propsData.pid" placeholder="请选择权限组" style="width: 80%;" clearable>
              <div v-for="option in propsListData" :key="option.id">
                   <el-option  :label="option.name" :value="option.id"></el-option>
                  <div v-if="option.children!='undefined'">
                     <el-option v-for="items in option.children" :key="items.id" :label="' ---| '+items.name" :value="items.id"></el-option>
                  </div>
              </div>
            </el-select>
          </el-form-item>

          <el-form-item label="权限名称" prop="name">
            <el-input v-model="propsData.name" type="text" placeholder="请输入中文的权限名称" style="width: 80%;"></el-input>
          </el-form-item>
          <el-form-item label="所属类(字母)" prop="class">
            <el-input v-model="propsData.class" type="text" placeholder="请输入指定类(英文字母)" style="width: 80%;"></el-input>
          </el-form-item>
          <el-form-item label="方法(字母)" prop="action">
            <el-input v-model="propsData.action" type="text" placeholder="请输入对应方法(英文字母)" style="width: 80%;"></el-input>
          </el-form-item>
           <el-form-item label="路由名称(字母)" prop="route">
            <el-input v-model="propsData.route" type="text" placeholder="请输入前端对应的路由名称(英文字母)" style="width: 80%;"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="mark">
            <el-input v-model="propsData.mark" type="text" placeholder="请输入备注" style="width: 80%;"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" :loading="loading"  @click="submitForm">保 存</el-button>
        </div>
      </el-dialog>
</template>


<script>
import * as api from '@/api/main-api' // API

export default {
  name: 'editSystemMenu',

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    propsData: Object,
    propsListData: Array
  },

  data() {
    return {

      loading: false,
      rules: {
        name: [
          { required: true, message: '权限名称不能为空', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ],
        class: [
          { required: true, message: '指定类不能为空', trigger: 'blur' },
          { pattern: /^[a-zA-Z][a-zA-Z0-9_]{2,30}$/, message: '指定类格式错误' }
        ],
        action: [
          { required: true, message: '方法名称不能为空', trigger: 'blur' },
          { pattern: /^[a-zA-Z][a-zA-Z0-9_]{2,30}$/, message: '方法名称格式错误' }
        ],
        route: [
          { required: true, message: '前端对应的路由名称不能为空', trigger: 'blur' },
          { pattern: /^[a-zA-Z][a-zA-Z0-9_]{2,30}$/, message: '路由名称格式错误' }
        ]
      }
    }
  },

  created() {

  },

  methods: {

    // 关闭弹窗，触发父组件修改visible值
    cancelModal() {
      this.$emit('update:visible', false)
    },

    // 表单提交
    submitForm() {
      // 数据赋值
      var postData = {
        id: this.propsData.id,
        name: this.propsData.name,
        class: this.propsData.class,
        action: this.propsData.action,
        route: this.propsData.route,
        mark: this.propsData.mark,
        pid: this.propsData.pid,
        display: this.propsData.display
      }
      // 数据开始提交
      this.$refs.propsData.validate(valid => {
        if (valid) {
          this.loading = true
          this.postDataUrl(postData)
        } else {
          console.log('error submit!!')
          this.loading = false
          return false
        }
      })
    },

    // 管理员提交数据
    postDataUrl(data) {
      api.editPermissionApi(data).then(response => {
        if (response.data.code === 0) {
          this.$root.message('操作成功', 'success')
          setTimeout(() => {
            this.cancelModal() // 关闭弹框
            this.$emit('refresh', true)
          }, 20)
        }
      })
      this.loading = false
    }

  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>